<template>
  <div class="login">
    <div class="login_left">
      <img id="imgload" src="../assets/images/Rectangle.png" alt="" srcset="">
    </div>
    <div class="login-form_box" v-if="!isRevamp">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="!successIs">
        <h3 class="title"><img src="../assets/images/logintitle.gif" alt=""></h3>
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" type="text" :class="usernameIs ? 'errinput' : ''" clearable
            auto-complete="off" placeholder="用户名">
            <div class="icon_ch" slot="prefix">
              <img src="../assets/images/user.png" alt="">
            </div>
            <div v-if="usernameIs" slot="suffix" class="icon_ch_is">{{ userTip }}</div>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" :class="passwordIs ? 'errinput' : ''" clearable
            auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
            <div class="icon_ch" slot="prefix" style="">
              <img src="../assets/images/lock.png" alt="">
            </div>
            <div v-if="passwordIs" slot="suffix" class="icon_ch_is">{{ pawTip }}</div>
          </el-input>
        </el-form-item>
        <div class="caCode" v-if="captchaEnabled">
          <el-input ref="account" v-model="userInput" placeholder="请输入验证码" name="account" type="text" tabindex="1"
            autocomplete="on" clearable />
          <canvas ref="canvas" @click="createCode" width="140" height="60"></canvas>
        </div>
        <el-form-item>
          <div class="checked_cl">
            <img src="../assets/images/checkboxi.png" alt="" srcset="" @click="checkboxHeld" v-if="!checkboxtb">
            <img src="../assets/images/checkbox.png" alt="" srcset="" @click="checkboxHeld" v-else>
            <div>记住密码</div>
          </div>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="medium" class="loginbtn" type="primary" style="width:100%;"
            @click.native.prevent="handleLogin" v-if="loginForm.account ? (loginForm.password ? true : false) : false">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <el-button v-else :loading="loading" size="medium" class="loginbtn" type="info" style="width:100%;">
            <span>登 录</span>
          </el-button>
        </el-form-item>
        <el-form-item>
          <div class="revamp_c">
            <img src="../assets/images/revamp.png" alt="" srcset="">
            <div @click="revampHeld">修改密码</div>
          </div>
        </el-form-item>
      </el-form>
      <div class="success_df" v-else>
        <img src="../assets/images/pana.png" alt="" srcset="">
        <div>登陆成功</div>
      </div>
    </div>
    <div class="revamp-from_box" v-else>
      <img src="../assets/index/arrow-left.png" alt="" srcset="" class="outlink" @click="revampHeld">
      <el-form ref="revampForm" :model="revampForm" :rules="revampRules" class="revamp-form" v-if="isNextStep == 0">
        <h3 class="title">修改密码</h3>
        <el-form-item prop="account">
          <el-input v-model="revampForm.account" type="text" :class="usernameIs ? 'errinput' : ''" clearable
            auto-complete="off" placeholder="用户名" @input="telChange">
            <div class="icon_ch" slot="prefix">
              <img src="../assets/images/user.png" alt="">
            </div>
            <div v-if="usernameIs" slot="suffix" class="icon_ch_is">{{ userTip }}</div>
          </el-input>
        </el-form-item>
        <el-form-item prop="phoneNumber">
          <el-input v-model="revampForm.phoneNumber" type="text" clearable auto-complete="off"
            :class="numberCode == 2 ? 'errinput' : ''" placeholder="手机号码" @input="inputChange">
            <div class="icon_ch" slot="prefix">
              <img src="../assets/images/smartphone.png" alt="">
            </div>
            <div slot="suffix" class="icon_ch_is" v-if="!send"
              :style="numberCode == 0 ? 'color:#989898;' : (numberCode == 1 ? 'color:#0584FE;' : 'color:#FE294D;')"
              @click="CodeSChange">{{ revampCodeS }}</div>
            <div slot="suffix" class="icon_ch_is" v-else
              :style="numberCode == 0 ? 'color:#989898;' : (numberCode == 1 ? 'color:#0584FE;' : 'color:#FE294D;')">{{
                revampCodeS }}
            </div>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="revampForm.code" type="text" clearable auto-complete="off" placeholder="验证码"
            @input="codeChange">
            <div class="icon_ch" slot="prefix">
              <img src="../assets/images/mail.png" alt="">
            </div>
            <div slot="suffix" class="icon_ch_is" v-if="isCodeN" style="color:#FE294D;">验证码错误</div>
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button size="medium" class="loginbtn" :type="nextStepis ? 'primary' : 'info'" style="width:100%;"
            @click="nextStep">
            <span>下一步</span>
          </el-button>
        </el-form-item>
      </el-form>
      <el-form ref="affirmForm" :model="affirmForm" :rules="affirmRules" class="revamp-form" v-if="isNextStep == 1">
        <h3 class="title">修改密码</h3>
        <el-form-item prop="pawone">
          <el-input v-model="affirmForm.pawone" :class="isaffirm ? 'errinput' : ''" type="text" clearable
            auto-complete="off" placeholder="密码" @input="affirmChange">
            <div class="icon_ch" slot="prefix">
              <img src="../assets/images/lock.png" alt="">
            </div>
            <div slot="suffix" class="icon_ch_is" v-if="isaffirm" style="color:#FE294D;">密码不一致</div>
          </el-input>
        </el-form-item>
        <el-form-item prop="pawtwo">
          <el-input v-model="affirmForm.pawtwo" :class="isaffirm ? 'errinput' : ''" type="text" clearable
            auto-complete="off" placeholder="确认密码" @input="affirmChange">
            <div class="icon_ch" slot="prefix">
              <img src="../assets/images/lock.png" alt="">
            </div>
            <div slot="suffix" class="icon_ch_is" v-if="isaffirm" style="color:#FE294D;">密码不一致</div>
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button size="medium" class="loginbtn" v-if="affirmForm.pawone ? (affirmForm.pawtwo ? true : false) : false"
            type="primary" style="width:100%;" @click="affirmHeld">
            <span>确认修改</span>
          </el-button>
          <el-button size="medium" class="loginbtn" v-else type="info" style="width:100%;">
            <span>确认修改</span>
          </el-button>
        </el-form-item>
      </el-form>
      <div class="success_df" v-if="isNextStep == 2">
        <img src="../assets/images/pana.png" alt="" srcset="">
        <div>密码修改成功</div>
        <div style="font-size:18px;"><span style="color: #0584FE;">{{ counts }}S</span> <span
            >后自动返回登录页</span></div>
      </div>
    </div>
    <div class="el-login-footer">
    </div>
	<div style="position: fixed;top: 0;left: 0;" v-if="isimgshow">
		<div id="loader-wrapper">
		  <div id="loader"></div>
		  <div class="loader-section section-left"></div>
		  <div class="loader-section section-right"></div>
		  <div class="load_title">加载中...</div>
		  </div>
	</div>
  </div>
  
</template>

<script>
import Cookies from "js-cookie";
import {
  encrypt,
  decrypt
} from '@/utils/jsencrypt'
import { getCode, updateUser, verifyCode } from "@/api/user"

export default {
  name: "Login",
  data() {
    return {
		isimgshow:true,
      successIs: false,
      checkboxtb: false,
      isRevamp: false,
      // title: process.env.VUE_APP_TITLE,
      title: '请登录',
      codeUrl: "",
      loginForm: {
        account: "",
        password: "",
      },
      loginRules: {
        account: [{
          required: false,
          trigger: "blur",
          message: "请输入您的账号"
        }],
        password: [{
          required: false,
          trigger: "blur",
          message: "请输入您的密码"
        }]
      },
      revampCodeS: '获取验证码',
      revampForm: {
        account: "",
        phoneNumber: "",
        code: ""
      },
      revampRules: {
        account: [{
          required: false,
          trigger: "blur",
          message: "请输入您的账号"
        }],
        phoneNumber: [{
          required: false,
          trigger: "blur",
          message: "请输入您的手机号"
        }]
      },
      affirmForm: {
        pawone: '',
        pawtwo: '',
      },
      affirmRules: {
        pawone: [{
          required: false,
          trigger: "blur",
          message: "请输入您的密码"
        }],
        pawtwo: [{
          required: false,
          trigger: "blur",
          message: "两次密码不一致"
        }],
      },

      loading: false,
      // 验证码开关
      // captchaEnabled: process.env.NODE_ENV == 'production' ? true : false,
      captchaEnabled: false,
      // 注册开关
      register: false,
      otherQuery: {},
      redirect: undefined,
      code: '', // 验证码字符串
      userInput: '', // 用户输入的验证码
      usernameIs: false,
      userTip: '',
      pawTip: '',
      passwordIs: false,
      numberCode: 0,
      count: 60,
      counts: 5,
      send: false,
      isCodeN: false,
      nextStepis: false,
      isNextStep: 0,
      isaffirm: false,
    };
  },
  watch: {
    loginForm: {
      handler(newName, oldName) {
        this.usernameIs = false
        this.passwordIs = false
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    // this.getCode();
    this.getCookie();
  },
  mounted() {
	  let that = this
		let imgload = document.getElementById('imgload')
		imgload.onload = function(){
			that.isimgshow = false
		}
    if (this.captchaEnabled) {

      this.createCode()
    }
    if (localStorage.getItem('user')) {
      this.loginForm.account = decrypt(localStorage.getItem('user'))
    }
    if (localStorage.getItem('paw')) {
      this.loginForm.password = decrypt(localStorage.getItem('paw'))
    }
  },
  methods: {
    nextStep() {

      if (this.revampForm.account && this.revampForm.phoneNumber && this.revampForm.code) {
        this.revampForm.code = Number(this.revampForm.code)
        verifyCode(this.revampForm).then(res => {
          if (res.code == 200) {
            this.isNextStep = 1
          } else if (res.code == 500) {
            this.usernameIs = true
            this.userTip = '用户名不正确'
          } else {
            this.isCodeN = true
          }
        })
      }
    },
    codeChange(e) {
      this.isCodeN = false
      if (this.revampForm.account && this.revampForm.phoneNumber && this.revampForm.code) {
        this.revampForm.code = Number(this.revampForm.code)
        console.log('下一步');
        this.nextStepis = true
      } else {
        this.nextStepis = false
      }
    },
    telChange(e) {
      this.usernameIs = false
      this.userTip = ''
      if (this.revampForm.account && this.revampForm.phoneNumber && this.revampForm.code) {
        this.revampForm.code = Number(this.revampForm.code)
        this.nextStepis = true
      } else {
        this.nextStepis = false
      }
    },
    CodeSChange() {
      var reg = /^1[3456789]\d{9}$/;

      if (reg.test(this.revampForm.phoneNumber)) {
        this.revampCodeS = '获取验证码'
        this.numberCode = 1
        this.send = true
        getCode(this.revampForm.phoneNumber).then(res => {
          if (res.code == 200) {
            this.timer = setInterval(() => {
              let count = this.count - 1
              this.revampCodeS = count + 'S后重新获取'
              if (count === 0) {
                clearInterval(this.timer)
                this.revampCodeS = "获取验证码"
                this.count = 60
                this.send = false
                return
              }
              this.count = count
            }, 1000)
          }
        })
      } else {
        this.numberCode = 2
        this.revampCodeS = '请核对手机号'
      }
    },
    inputChange(e) {
      if (e.length == 11) {
        this.numberCode = 1
      } else {
        this.numberCode = 0
      }
      if (this.revampForm.account && this.revampForm.phoneNumber && this.revampForm.code) {
        this.nextStepis = true
      } else {
        this.nextStepis = false
      }
      this.revampCodeS = '获取验证码'
    },
    revampHeld() {
      if (this.isNextStep == 0 || this.isNextStep == 2) {
        this.isRevamp = !this.isRevamp
        this.revampForm = {}
        this.usernameIs = false
        this.this.userTip = ''
        this.isCodeN = false
      } else {
        this.isNextStep = this.isNextStep - 1
      }
    },
    affirmHeld() {
      if (this.affirmForm.pawone != this.affirmForm.pawtwo) {
        console.log('两次密码不一致');
        this.isaffirm = true
      } else {
        this.isNextStep = 2
        let datanew = {
          password: this.affirmForm.pawone,
          code: this.revampForm.code,
          account: this.revampForm.account,
          phoneNumber: this.revampForm.phoneNumber
        }
        updateUser(datanew).then(res => {
          if (res.code == 200) {
            this.timers = setInterval(() => {
              let count = this.counts - 1
              if (count === 0) {
                clearInterval(this.timers)
                this.revampHeld()
                this.isCodeN = false
                this.affirmForm = {}
                this.revampForm = {}
                this.loginForm = {}
                this.counts = 5
                return
              }
              this.counts = count
            }, 1000)
          }
        })


      }
    },
    affirmChange() {
      this.isaffirm = false
    },
    // 生成验证码
    createCode() {
      const that = this;
      let codeLength = 4; // 验证码长度
      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext('2d');
      let codeChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let code = '';
      for (let i = 0; i < codeLength; i++) {
        let charIndex = Math.floor(Math.random() * codeChars.length);
        code += codeChars.charAt(charIndex);
      }
      this.code = code;

      // 绘制验证码图片
      ctx.fillStyle = that.MathColor(180, 230);
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = that.MathNumber(30, 40) + 'px Arial';
      ctx.fillStyle = that.MathColor(80, 180);
      ctx.fillText(code, 20, 45);
      for (var i = 0; i < 6; i++) {
        ctx.strokeStyle = that.MathColor(0, 255);
        ctx.beginPath();
        ctx.moveTo(that.MathNumber(0, canvas.width), that.MathNumber(0, canvas.height));
        ctx.lineTo(that.MathNumber(0, canvas.width), that.MathNumber(0, canvas.height));
        ctx.stroke();
      }
      for (var i = 0; i < 50; i++) {
        ctx.fillStyle = that.MathColor(0, 255);
        ctx.beginPath();
        ctx.arc(that.MathNumber(0, canvas.width), that.MathNumber(0, canvas.height), 0.5, 0, 2 * Math.PI);
        ctx.fill();
      }
    },
    //随机整数
    MathNumber(min, max) {
      var n = Math.floor(Math.random() * (max - min) + min);
      return n;
    },
    //随机颜色
    MathColor(min, max) {
      var r = this.MathNumber(min, max);
      var g = this.MathNumber(min, max);
      var b = this.MathNumber(min, max);
      return `rgb(${r},${g},${b})`;
    },
    // getCode() {
    //   this.codeUrl = null
    //   setTimeout(() => {
    //     this.codeUrl = '/api/user/captcha?timestamp=' + new Date().getTime()
    //   })
    // },
    getCookie() {
      const account = Cookies.get("account");
      const password = Cookies.get("password");
      this.loginForm = {
        account: account === undefined ? this.loginForm.account : account,
        password: password === undefined ? this.loginForm.password : decrypt(password),
      };
    },
    checkboxHeld() {
      this.checkboxtb = !this.checkboxtb
    },
    handleLogin() {

      if (this.captchaEnabled) {
        if (this.userInput.toLowerCase() !== this.code.toLowerCase()) {
          this.$message.error('验证码错误，请重新输入');
          this.createCode();
          this.userInput = ''
          return false
        }
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("Login", this.loginForm).then((res) => {
            if (res.code == 200) {
              this.successIs = true
              setTimeout(() => {
                this.$router.push({
                  path: this.redirect || "/"
                }).catch(() => { });
                if (this.checkboxtb) {
                  localStorage.setItem('user', encrypt(this.loginForm.account))
                  localStorage.setItem('paw', encrypt(this.loginForm.password))
                } else {
                  localStorage.removeItem('user')
                  localStorage.removeItem('paw')
                }
              }, 1000)
            }
          }).catch((err) => {
            console.log(err);
            if (err.code == 5000) {
              this.usernameIs = true
              this.userTip = err.message
            } else if(err.code==5001){
              this.passwordIs = true
              this.pawTip = err.message
            }else{
              this.$Toast(err.message)
            }
            this.loading = false;
            // if (this.captchaEnabled) {
            //   this.getCode();
            // }
          });
        }
      });
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
	#loader-wrapper {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 999999;
	}
	
	#loader {
	  display: block;
	  position: relative;
	  left: 50%;
	  top: 50%;
	  width: 150px;
	  height: 150px;
	  margin: -75px 0 0 -75px;
	  border-radius: 50%;
	  border: 3px solid transparent;
	  border-top-color: #FFF;
	  -webkit-animation: spin 2s linear infinite;
	  -ms-animation: spin 2s linear infinite;
	  -moz-animation: spin 2s linear infinite;
	  -o-animation: spin 2s linear infinite;
	  animation: spin 2s linear infinite;
	  z-index: 1001;
	}
	
	#loader:before {
	  content: "";
	  position: absolute;
	  top: 5px;
	  left: 5px;
	  right: 5px;
	  bottom: 5px;
	  border-radius: 50%;
	  border: 3px solid transparent;
	  border-top-color: #FFF;
	  -webkit-animation: spin 3s linear infinite;
	  -moz-animation: spin 3s linear infinite;
	  -o-animation: spin 3s linear infinite;
	  -ms-animation: spin 3s linear infinite;
	  animation: spin 3s linear infinite;
	}
	
	#loader:after {
	  content: "";
	  position: absolute;
	  top: 15px;
	  left: 15px;
	  right: 15px;
	  bottom: 15px;
	  border-radius: 50%;
	  border: 3px solid transparent;
	  border-top-color: #FFF;
	  -moz-animation: spin 1.5s linear infinite;
	  -o-animation: spin 1.5s linear infinite;
	  -ms-animation: spin 1.5s linear infinite;
	  -webkit-animation: spin 1.5s linear infinite;
	  animation: spin 1.5s linear infinite;
	}
	
	
	@-webkit-keyframes spin {
	  0% {
	    -webkit-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
	    transform: rotate(360deg);
	  }
	}
	
	@keyframes spin {
	  0% {
	    -webkit-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	    transform: rotate(0deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	    -ms-transform: rotate(360deg);
	    transform: rotate(360deg);
	  }
	}
	
	
	#loader-wrapper .loader-section {
	  position: fixed;
	  top: 0;
	  width: 51%;
	  height: 100%;
	  background: #4C5561;
	  z-index: 1000;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
	
	#loader-wrapper .loader-section.section-left {
	  left: 0;
	}
	
	#loader-wrapper .loader-section.section-right {
	  right: 0;
	}
	
	
	.loaded #loader-wrapper .loader-section.section-left {
	  -webkit-transform: translateX(-100%);
	  -ms-transform: translateX(-100%);
	  transform: translateX(-100%);
	  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	
	.loaded #loader-wrapper .loader-section.section-right {
	  -webkit-transform: translateX(100%);
	  -ms-transform: translateX(100%);
	  transform: translateX(100%);
	  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	
	.loaded #loader {
	  opacity: 0;
	  -webkit-transition: all 0.3s ease-out;
	  transition: all 0.3s ease-out;
	}
	
	.loaded #loader-wrapper {
	  visibility: hidden;
	  -webkit-transform: translateY(-100%);
	  -ms-transform: translateY(-100%);
	  transform: translateY(-100%);
	  -webkit-transition: all 0.3s 1s ease-out;
	  transition: all 0.3s 1s ease-out;
	}
	
	.no-js #loader-wrapper {
	  display: none;
	}
	
	.no-js h1 {
	  color: #222222;
	}
	
	#loader-wrapper .load_title {
	  font-family: 'Open Sans';
	  color: #FFF;
	  font-size: 19px;
	  width: 100%;
	  text-align: center;
	  z-index: 9999999999999;
	  position: absolute;
	  top: 60%;
	  opacity: 1;
	  line-height: 30px;
	}
	
	#loader-wrapper .load_title span {
	  font-weight: normal;
	  font-style: italic;
	  font-size: 13px;
	  color: #FFF;
	  opacity: 0.5;
	}
.success_df {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 95%;
    height: 75%;
  }

  div {
    font-size: 30px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    margin-top: 42px;
  }
}

.checked_cl {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  img {
    width: 22px;
    height: 22px;
    margin-right: 16px;
    cursor: pointer;
  }

  div {
    font-size: 20px;
    color: #414141;
  }
}

.revamp_c {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    margin-right: 14px;
    width: 20px;
    height: 20px;
  }

  div {
    color: #989898;
    font-size: 16px;
    cursor: pointer;
  }

  div:hover {
    color: #0584FE;
  }
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  // background-image: url("../assets/images/login-background.jpg");
  // background-size: 100% 100%;
}

.login_left {
  // min-width: 500px;
  flex: 3;
  // width: 1185px;
  // height: 1080px;
  height: calc(100%);
  max-height: 1080px;
  // background: url("../assets/images/Rectangle-2625.gif")no-repeat;
  // background-size: 100% 100%;
  img{
    width: 100%;
    height: 100%;
  }

}

.title {
  margin: 0px auto 10px auto;
  text-align: center;
  font-size: 40px;
  font-weight: 400;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 80%;
    height: 60%;
    margin-right: 20px;
  }

  &h3 {
    margin-bottom: 10px;
  }
}

.login-form_box {
  flex: 2;
  // width: 735px;
  padding: 25px 25px 5px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.revamp-from_box {
  flex: 2;
  // width: 735px;
  height: 100%;
  padding: 25px 25px 5px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .outlink {
    position: absolute;
    left: 20px;
    top: 20px;
    cursor: pointer;
  }

  .revamp-form .title {
    margin: 0px auto 10px auto;
    text-align: center;
    font-size: 40px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 73px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }
}

.icon_ch {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
}



.icon_ch img {
  width: 26px;
  height: 26px;
}

.login-form {
  width: 60%;
  // height: 100%;
  // border-radius: 6px;
  // background: #ffffff;
  // backdrop-filter: blur(20px);
  // width: 507px;
  // min-width: 200px;

  .el-input {
    height: 68px;

    input {
      height: 68px;
      font-size: 20px;
      padding-left: 55px;
      border: 3px solid #EEEEEE;
      border-radius: 3px;
      color: #000;
    }

  }

  .errinput {
    input {
      color: #FE294D !important;
    }
  }

  .input-icon {
    height: 26px;
    width: 26px;
    margin-left: 10px;
  }
}

.revamp-form {
  // width: 507px;
  width: 60%;

  .el-input {
    height: 68px;

    input {
      height: 68px;
      font-size: 20px;
      padding-left: 55px;
      border: 3px solid #EEEEEE;
      border-radius: 3px;
      color: #000;
    }

    .icon_ch_is {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 400;
      padding-right: 23px;
      color: #FE294D;
      cursor: pointer;
    }

    input:focus {
      border: 3px solid #BADDFF;
    }
  }

  .errinput {
    input {
      color: #FE294D !important;
    }
  }

  .input-icon {
    height: 26px;
    width: 26px;
    margin-left: 10px;
  }
}

.icon_ch_is {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  padding-right: 23px;
  color: #FE294D;
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 30%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  // height: 40px;
  // line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}

.loginbtn {
  height: 68px;
  font-size: 24px;
}

.caCode {
  display: flex;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0);
  overflow: hidden;
  border-radius: 5px;
  color: #333;
  margin-bottom: 22px;

  el-input {
    width: 60%;
  }
}
</style>
